<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/table_data_tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>商品分类</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico"> <link href="__PUBLIC__/admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="__PUBLIC__/admin/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="__PUBLIC__/admin/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/admin/css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="">
                            <a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">添加行</a>
                        </div>
                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <tr>
                                    <th><img src="__PUBLIC__/admin/img/tv-expandable.gif" alt=""></th>
                                    <th>排序</th>
                                    <th>分类名称</th>
                                    <th>分类id</th>
                                    <th>地址</th>
                                    <th>是否显示</th>
                                </tr>
                            </thead>
                            <tbody>
                                <foreach name="nav" item="val">
                                    <tr class="gradeX">
                                        <td class="center"><img src="/Public/admin/img/tv-collapsable-last.gif" alt="" onClick="treeClicked(this,{$val.id},'{$val.parent_id}')"></td>
                                        <td class="center">{$val['order']}</td>
                                        <td>{$val['name']}</td>
                                        <td>{$val['id']}</td>
                                        <td>{$val['url']}</td>
                                        <td class="center">
                                            <if condition="$val['is_show'] eq 0"><i class="glyphicon glyphicon-remove"></i>
                                            <elseif condition="$val['is_show'] eq 1" /><i class="glyphicon glyphicon-ok"></i>
                                            </if>
                                        </td>
                                    </tr>
                                    <foreach name="val.list" item="v">
                                        <tr class="gradeX parent_id_{$v.parent_id}">
                                            <td class="center"><img src="__PUBLIC__/admin/img/tv-expandable.gif" alt="" onClick="treeClicked(this,{$v.id},'{$v.parent_id}')"></td>
                                            <td class="center">{$v['order']}</td>
                                            <td>&nbsp;&nbsp;&nbsp; <sup>|_</sup>{$v.name}</td>
                                            <td>{$v['id']}</td>
                                            <td>{$v['url']}</td>
                                            <td class="center">
                                                <if condition="$v['is_show'] eq 0"><i class="glyphicon glyphicon-remove"></i>
                                                <elseif condition="$v['is_show'] eq 1" /><i class="glyphicon glyphicon-ok"></i>
                                                </if>
                                            </td>
                                        </tr>
                                    </foreach>
                                </foreach>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th><img src="__PUBLIC__/admin/img/tv-expandable.gif" alt=""></th>>
                                    <th>排序</th>
                                    <th>分类名称</th>
                                    <th>分类id</th>
                                    <th>地址</th>
                                    <th>是否显示</th>
                                </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="__PUBLIC__/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="__PUBLIC__/admin/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="__PUBLIC__/admin/js/plugins/jeditable/jquery.jeditable.js"></script>
    <script src="__PUBLIC__/admin/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="__PUBLIC__/admin/js/plugins/dataTables/dataTables.bootstrap.js"></script>
    <script src="__PUBLIC__/admin/js/content.min.js?v=1.0.0"></script>
    <script>
        $(document).ready(function(){$(".dataTables-example").dataTable();var oTable=$("#editable").dataTable();oTable.$("td").editable("http://www.zi-han.net/theme/example_ajax.php",{"callback":function(sValue,y){var aPos=oTable.fnGetPosition(this);oTable.fnUpdate(sValue,aPos[0],aPos[1])},"submitdata":function(value,settings){return{"row_id":this.parentNode.getAttribute("id"),"column":oTable.fnGetPosition(this)[2]}},"width":"90%","height":"100%"})});function fnClickAddRow(){$("#editable").dataTable().fnAddData(["Custom row","New row","New row","New row","New row"])};
    </script>
    <!-- <script type="text/javascript" src="http://tajs.qq.com/stats?sId=792590415" charset="UTF-8"></script> -->
<script>

    $(document).ready(function(){ 
        // 表格行点击选中切换
        $('.bDiv > table>tbody >tr').click(function(){
            $(this).toggleClass('trSelected');
        });             
    });
  
     // 点击展开 收缩节点
     function treeClicked(obj,cat_id,parent_id){
        var src = $(obj).attr('src');
        var str = '<foreach name="val.list" item="v">'
        str += '<tr class="gradeX parent_id_{$v.parent_id}">'
        str += '<td class="center"><img src="__PUBLIC__/admin/img/tv-expandable.gif" alt="" style="display: none"></td>'
        str += '<td class="center">{$v.order}</td>'
        str += '<td>&nbsp;&nbsp;&nbsp; <sup>|_</sup>{$v.name}</td>'
        str += '<td>{$v.id}</td>'
        str += '<td>{$v.url}</td>'
        str += '<td class="center">'
        str += '<if condition="$v.is_show eq 0"><i class="glyphicon glyphicon-remove"></i>'
        str += '<elseif condition="$v.is_show eq 1" /><i class="glyphicon glyphicon-ok"></i>'
        str += '</if>'
        str += '</td>'
        str += '</tr>'
        str += '</foreach>'
        console.log(str);
        if(src == '/Public/admin/img/tv-expandable.gif')
        {
            $('.parent_id_'+cat_id).show();
            $(obj).attr('src','/Public/admin/img/tv-collapsable-last.gif');
        }else{
            console.log(cat_id);
            $('.parent_id_'+cat_id).hide();
            $(obj).attr('src','/Public/admin/img/tv-expandable.gif');
        }       
    }      
</script>
</body>


</html>
